<template>
  <!--面试记录-->
  <view>
    <baseHead title="面试记录" bg="#ffffff" color="#000000"></baseHead>
    <view v-if="datalist.length > 0">
      <view
        class="interview-item"
        style="padding-top: 20rpx"
        v-for="(item, key) in datalist"
        :key="key"
      >
        <view class="fl-t">
          <view class="date">
            {{ item.InterviewTime.split(" ")[0].split("-")[1] }}
            月{{ item.InterviewTime.split(" ")[0].split("-")[2] }}日
          </view>
          <view class="time">{{ item.InterviewTime.split(" ")[1] }}</view>
        </view>
        <view class="company-info fl-t">
          <image :src="URL + item.LogoPath" mode="aspectFit"></image>
          <view style="flex: 1">
            <view class="wages"
              >{{ item.JobName }} ·
              <text>{{ item.MinWage / 1000 }}~{{ item.MaxWage / 1000 }}K</text>
            </view>
            <view class="fl-lr-c address">
              <view>{{ item.CorpName }}</view>
              <view>{{ item.Address }}</view>
            </view>
          </view>
        </view>
        <view class="fl-lr-c bottom-but">
          <view
            style="display: flex; justify-content: center; align-items: center"
          >
            <image
              @click="fnPhone"
              src="/static/recruit/home/phone.png"
            ></image>
            呼叫HR
          </view>

          <view class="fl-t">
            <view class="fl-c but1">取消面试</view>
            <view class="fl-c but2">面试签到</view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" />
    </view>
    <u-empty
      v-else
      mode="data"
      icon="/static/recruit/index/qsy.png"
      width="350"
      marginTop="150"
    >
    </u-empty>
  </view>
</template>

<script>
import baseHead from "@/pages/component/baseHead.vue";
export default {
  data() {
    return {
      URL: this.$config.domain.staticUrl,
      datalist: [],

      status: "loadmore",
      PageIndex: 1,
      PageSize: 10,
    };
  },
  // watch:{
  // 	themeBgColor:{
  // 		handler(nVal, oVal) {
  // 			console.log(nVal);
  // 			console.log(oVal);
  // 		},
  // 		deep: true
  // 	}
  // },

  //子组件
  components: {
    baseHead,
  },

  // 监听页面初始化
  onInit() {},
  // 监听页面加载，其参数为上个页面传递的数据
  onLoad(option) {},
  //  启动，从后台进入前台显示  或从后一个跳转到前一个页面
  onShow() {},
  // 监听页面初次渲染完成
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  // 创建完成立即调用
  created() {},
  // 监听窗口尺寸变化
  onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},
  // 页面滚动到底部的事件
  onReachBottom() {
    console.log("懒加载");
    // 加载前值为loadmore，加载中为loading，没有数据为nomore
    if (this.status != "nomore") {
      this.status = "loading";
      this.listdata();
    }
  },
  // 点击 tab 时触发，参数为Object
  onTabItemTap() {},

  created() {
    this.listdata();
  },
  // 计算属性
  computed: {},
  // 计算方法
  methods: {
    listdata() {
      let obj = {
        InterviewState: "",
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      };
      this.$http.huirc.interviewlistByUser(obj).then((res) => {
        console.log(res);
        if (res.Result) {
          if (res.Result.Items.length == 0) {
            // 没有数据----
            this.status = "nomore";
            return;
          }
          this.datalist = this.datalist.concat(res.Result.Items);

          console.log(res.Result.Items.length, this.PageSize);
          if (res.Result.Items.length >= this.PageSize) {
            this.PageIndex++;
            // 表示还有数据
          } else {
            //没有更多数据了
            this.status = "nomore";
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.interview-item {
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .date,
  .time {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
  }

  .date {
    margin-right: 20rpx;
  }

  .company-info {
    padding: 40rpx 0 60rpx;

    image {
      width: 110rpx;
      height: 110rpx;
      background: #ffd3db;
      border-radius: 10rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
    }

    .wages {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }

    .address {
      flex: 1;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      margin-top: 14rpx;
    }
  }

  .bottom-but {
    width: 100%;

    image {
      width: 68rpx;
      height: 68rpx;
    }

    .but1 {
      width: 200rpx;
      height: 68rpx;
      background: #ffffff;
      border: 1px solid #cdcbcb;
      border-radius: 10rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      margin-right: 30rpx;
    }

    .but2 {
      width: 200rpx;
      height: 68rpx;
      background: #1684fc;
      border-radius: 10rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fff;
    }
  }
}
</style>
